<template lang="jade">
  .agenda 
    .agenda-item(v-for="item in agenda", :style="{ left: item.left + 'pt' }")
      img(v-if="item.type==='fist'", :src="item.img", :alt="item.alt")
      .dot(v-if="item.type==='round'", :style="{ background: item.dotcolor }")
      .text {{item.text}}
</template>

<style lang="less" scoped>
  .agenda{
    width: 100%;
    border-bottom: 1pt solid #000;
    margin-top: 20pt;
    &-item{
      position: relative;
      width: 40pt;
      img{
        width: 13pt;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
      .dot{
        width: 6pt;
        height: 6pt;
        border: 1px solid #000;
        box-sizing: border-box;
        border-radius: 100%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3pt;
        margin: auto;
      }
      .text{
        position: absolute;
        color: #fff;
        font-size: 10pt;
        top: 6pt;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
      }
    }
  }
    
</style>

<script>
  import constants from 'constants'
  export default {
    data() {
      return {
        agenda: constants.AGENDA
      }
    }
  }
</script>